<template>
	<view class="intro-body">
		<view class="section-title">
			<text>商家介绍</text>
		</view>
		<view class="noData" v-if="!introData && !businessLicense">
			暂无商家介绍信息
		</view>
		<view class="merchant-info">
			<view class="merchant-info-name" v-if="introData && introData.name">
				{{ introData.name }}
			</view>
			<view class="merchant-info-score" v-if="introData && introData.score">
				<view class="score-icons">
					<uni-icons v-for="i in 5" :key="i" :type="getStarType(i, introData.score)" color="#FFD700"
						size="16" />
				</view>
				<view class="score-value" v-if="introData && introData.score">
					{{ introData.score }}分
				</view>
			</view>
			<view class="merchant-info-other" v-if="introData">
				<text class="mr40" v-if="introData.foundingTime">成立{{ introData.foundingTime }}年</text><text
					v-if="introData.serviceNum">服务{{ introData.serviceNum }}人次</text>
			</view>
		</view>
		<view class="intro-content">
			<view :class="['intro-text', { expanded: isExpanded }]" id="intro-text">{{
        introData.intro || ""
      }}</view>
			<view class="expand-btn" v-if="hasOverflow" @tap="toggleExpand">
				{{ isExpanded ? "收起" : "展开全部" }}
			</view>
		</view>
		<view class="intro-box">
			<view class="intro-box-item">
				<view class="tags-list">
					<view class="tags-item restaurant" v-for="(item, index) in introData.tags" :key="index">
						{{ item }}
					</view>
				</view>
			</view>
			<view class="intro-box-item" v-if="introData && introData.projectIntro">
				<view class="item-title"> 项目简介 </view>
				<view class="project-info">
					<!-- 	<view class="project-info-name">
						{{introData.projectIntro}}
					</view> -->
					<view class="project-info-desc">
						{{ introData.projectIntro }}
					</view>
					<view class="tags-list pb30">
						<view class="tags-item restaurant" v-for="(tag, tIndex) in introData.projectIntroTags"
							:key="tIndex">
							{{ tag }}
						</view>
					</view>
				</view>
			</view>
			<view class="intro-box-item" v-if="
          introData && introData.priceList && introData.priceList.length > 0
        ">
				<view class="item-title"> 费用概要 </view>
				<view class="fee-section">
					<view class="fee-table">
						<view class="fee-table-header">
							<text class="fee-th name">项目名称</text>
							<text class="fee-th">费用</text>
							<text class="fee-th">时间</text>
						</view>
						<view class="fee-table-row" v-for="(item, idx) in introData.priceList" :key="idx">
							<text class="fee-td name">{{ item.name }}</text>
							<text class="fee-td">{{ item.costContent }}</text>
							<text class="fee-td">{{ item.timeContent }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="intro-box-item" v-if="
          introData &&
          introData.activityImgList &&
          introData.activityImgList.length > 0
        ">
				<view class="item-title"> 项目图片 </view>
				<!-- <view class="project-img">
					<view class="project-item" v-for="(item,index) in introData.activityImgList" :key="index">
						<view class="project-img">
							<image class="project-img-url" :src="item" mode="aspectFill"></image>
						</view>
						<view class="project-img-name">
							{{item.name}}
						</view>
					</view>
				</view> -->
				<view :class="['img-list', { flex: introData.projectImgCols != 1 }]">
					<view class="img-item" v-for="(item, index) in introData.activityImgList" :key="index">
						<image class="img-item-url" :src="item"
							:mode="introData.projectImgCols == 1 ? 'widthFix' : 'aspectFill'"></image>
					</view>
				</view>
			</view>
			<view class="intro-box-item" v-if="introData && introData.noticeList">
				<view class="item-title"> 注意事项 </view>
				<view class="precautions-box">
					<view class="precautions-item" v-for="(item, index) in introData.noticeList" :key="index">
						<!-- <uni-icons
              type="checkmarkempty"
              size="16"
              color="#3263EB"
            ></uni-icons> -->
						<view class="precautions-item-value">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="businessLicense" v-if="businessLicense" @click="goBusinessLicense">
			商家资质
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isExpanded: false,
				hasOverflow: false,
			};
		},
		props: ['introData', 'businessLicense'],
		onLoad() {},
		methods: {
			goBusinessLicense() {
				uni.navigateTo({
					url: "/mall_subpages/merchants/businessLicense?businessLicense=" + this.businessLicense
				})
			},
			getStarType(index, score) {
				score = Number(score);
				if (score >= index + 1) {
					return 'star-filled';
				} else if (score >= index + 0.5) {
					return 'starhalf';
				} else {
					return 'star';
				}
			},
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},
			checkOverflow() {
				// 使用uni-app的API获取元素高度
				const query = uni.createSelectorQuery().in(this);
				query.select('#intro-text').boundingClientRect(data => {
					if (data) {
						// 如果内容高度大于5行的高度（假设每行20px），则显示展开按钮
						this.hasOverflow = data.height > 100;
					}
				}).exec();
			}
		},
		mounted() {
			this.checkOverflow();
		},
		watch: {
			introData: {
				handler() {
					this.$nextTick(() => {
						this.checkOverflow();
					});
				},
				deep: true
			}
		},
	};
</script>

<style lang="less">
	@import "./intro.less";

	.fee-section {
		margin: 30rpx 0;

		.fee-title {
			font-weight: bold;
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}

		.fee-table {
			background: #fff;
			border-radius: 8rpx;
			overflow: hidden;

			.fee-table-header,
			.fee-table-row {
				display: flex;
				align-items: center;
				padding: 18rpx 0;
			}

			.fee-table-header {
				background: #f5f5f5;
				font-weight: bold;
				font-size: 28rpx;

				.fee-th {
					flex: 1;
					text-align: left;
					padding-left: 20rpx;

					&.name {
						flex: 1.5;
					}
				}
			}

			.fee-table-row {
				border-bottom: 1rpx solid #eee;
				font-size: 28rpx;

				.fee-td {
					flex: 1;
					text-align: left;
					padding-left: 20rpx;

					&.name {
						flex: 1.5;
					}
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}

	.intro-content {
		.intro-text {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 5;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 1.5;
			font-size: 28rpx;
			word-break: break-all;

			&.expanded {
				-webkit-line-clamp: unset;
			}
		}

		.expand-btn {
			color: #007AFF;
			font-size: 28rpx;
			text-align: left;
			padding: 10rpx 0;
			display: block;
		}
	}
</style>